<template>
  <div class="detail-table small-table" id="applied-form-detail">
    <div class="top-toolbar text-right" style="margin-top: -10px; margin-bottom: 6px;">
      <Button :loading="exportLoading" @click="exportToExcel">
        导出
        <Icon type="md-download" v-if="!exportLoading" />
      </Button>
    </div>
    <Table :border="table.showBorder"
           :stripe="table.showStripe"
           :show-header="table.showHeader"
           :height="table.fixedHeader ? table.height : ''"
           :size="table.size"
           :data="table.data"
           :columns="table.columns"
           :loading="table.loading"
           :disabledHover="table.disabledHover"
           :highlight-row="table.highlightRow"
           @on-selection-change="onSelectionChange">
      <template slot-scope="{ row, index }" slot="laboratory">
          <span v-for="(item, index) in row.classroom" :key="index">
            <span
              v-if="item.institute">{{ item.institute }}&nbsp; -<br/></span>{{ item.name }}&nbsp; -<br/>{{ item.code }}
              <span v-if="index !== row.classroom.length - 1">
                <span class="d-none">**</span>
                <Divider style="margin-top: 10px; margin-bottom: 10px;"/>
                <span class="d-none">**</span>
              </span>
          </span>
      </template>
      <template slot-scope="{ row, index }" slot="cGrade">
          <span v-for="(item, index) in row.cGrade.content" :key="index">
            <span>{{ item || '无'}}</span>
            <span v-if="index !== row.cGrade.content.length - 1">
              <span class="d-none">##</span>
              <Divider style="margin-top: 10px; margin-bottom: 10px;"/>
            </span>
          </span>
      </template>
      <template slot-scope="{ row, index }" slot="cInstitute">
          <span v-for="(item, index) in row.cInstitute.content" :key="index">
            <span>{{ item || '无'}}</span>
            <span v-if="index !== row.cInstitute.content.length - 1">
              <span class="d-none">##</span>
              <Divider style="margin-top: 10px; margin-bottom: 10px;"/>
            </span>
          </span>
      </template>
      <template slot-scope="{ row, index }" slot="cMajor">
          <span v-for="(item, index) in row.cMajor.content" :key="index">
            <span>{{ item || '无'}}</span>
            <span v-if="index !== row.cMajor.content.length - 1">
              <span class="d-none">##</span>
              <Divider style="margin-top: 10px; margin-bottom: 10px;"/>
            </span>
          </span>
      </template>
      <template slot-scope="{ row, index }" slot="cSclass">
          <span v-for="(item, index) in row.cSclass.content" :key="index">
            <span>{{ item || '无'}}</span>
            <span v-if="index !== row.cSclass.content.length - 1">
              <span class="d-none">##</span>
              <Divider style="margin-top: 10px; margin-bottom: 10px;"/>
            </span>
          </span>
      </template>
      <template v-if="expType === 'TRAINING'" slot-scope="{ row, index }" slot="expTime">
        <span v-for="(item, index) in row.trainingExpTime" :key="index">
          {{ item.dates.join(' ~ ') }}
          <span v-if="typeof item.haveClassOnWeekend !== 'undefined'">
            <br />
            (周末{{ item.haveClassOnWeekend ? '' : '不' }}上课)
          </span>
        </span>
      </template>
      <template v-if="showActionColumn" slot-scope="{ row, index }" slot="action">
        <Button type="primary" :size="table.btnSize" @click="edit(row)">
          <font-awesome-icon icon="edit"/>
          修改
        </Button>
        <Button type="warning" :size="table.btnSize" class="ml-15" @click="del(row)">
          <font-awesome-icon icon="trash-alt"/>
          删除
        </Button>
      </template>
    </Table>
    <div class="modal-container">
      <Modal width='95'
            v-model="modal.save.show"
            footer-hide @on-ok="modal.save.show = false"
            @on-cancel="closeSaveModal">
        <p slot="header" class="text-center">{{ modal.save.title }}</p>
        <div>
          <save-course-exp
            v-if="modal.save.show"
            :fieldsetTitle="modal.save.fieldsetTitle"
            :app_code="modal.save.app_code"
            :sid="modal.save.sid"
            :expIndex="modal.save.expIndex"
            :editSingle="modal.save.editSingle"
            v-on:failFillFrom="failFillFrom"
            v-on:saveSuccess="saveSuccess"
          ></save-course-exp>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import { getAppliedFormDetail } from '@/api/applied-form-mgmt'
import { trim, activeTableMove } from '@/libs/tools'
import { s2ab } from '@/libs/excel'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
import SaveCourseExp from '_c/save-course-exp/save-course-exp'
library.add(faEdit)
library.add(faTrashAlt)
export default {
  name: 'AppliedFormDetailTable',
  components: {
    'save-course-exp': SaveCourseExp
  },
  props: {
    // 申请表code
    code: {
      type: String,
      default: ''
    },
    // 申请表序号
    index: '',
    // 显示操作列
    showActionColumn: {
      type: Boolean,
      default: false
    },
    // 显示selection列
    showSelectionColumn: {
      type: Boolean,
      default: false
    },
    prefixClass: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    immediate: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      expType: 'COURSE',
      table: {
        showBorder: true,
        showStripe: false,
        showHeader: true,
        fixedHeader: true,
        height: 500,
        disabledHover: true,
        size: 'small',
        selection: [],
        currRowIndex: '',
        loading: false,
        btnSize: 'small',
        columns: [{
          type: 'selection',
          width: 40,
          align: 'center'
        }, {
          title: '类别',
          width: 55,
          key: 'expType',
          align: 'center',
          render: (h, params) => {
            const row = params.row
            const color = row.expType.content === 'TRAINING' ? 'cyan' : 'blue'
            const text = row.expType.content === 'TRAINING' ? '实训' : '普通'
            return h('Tag', {
              props: {
                color: color
              },
              style: {
                marginRight: '0'
              }
            }, text)
          },
          className: 'row-combined'
        }, {
          title: '教师名称',
          key: 'teacherName',
          width: 70,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.teacherName.content || '无')
          },
          className: 'row-combined'
        }, {
          title: '课程名称',
          key: 'courseName',
          minWidth: 130,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.courseName.content || '无')
          },
          className: 'row-combined'
        }, {
          title: '课程类别',
          key: 'courseType',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.courseType.content || '无')
          },
          className: 'row-combined'
        }, {
          title: '实验教材',
          key: 'textbook',
          minWidth: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.textbook.content || '无')
          },
          className: 'row-combined'
        }, {
          title: '实验编号',
          key: 'expIndex',
          width: 40,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.expIndex.content)
          },
          className: 'row-combined'
        }, {
          title: '实验名称',
          key: 'title',
          minWidth: 150,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.title.content || '无')
          },
          className: 'row-combined'
        }, {
          title: '实验类型',
          key: 'type',
          width: 75,
          align: 'center',
          render: (h, params) => {
            return h('span', params.row.type.content || '无')
          },
          className: 'row-combined'
        }, {
          title: '实验时间',
          align: 'center',
          children: [
            {
              title: '周次',
              key: 'sweek',
              width: 45,
              className: 'row-combined',
              align: 'center'
            }, {
              title: '星期',
              key: 'sdate',
              width: 45,
              className: 'row-combined',
              align: 'center'
            }, {
              title: '节次',
              key: 'section',
              width: 80,
              align: 'center',
              className: 'row-combined',
              render: (h, params) => {
                return h('span', params.row.section.join('、') || '无')
              }
            }
          ]
        }, {
          title: '实验室',
          slot: 'laboratory',
          key: 'classroom',
          minWidth: 160,
          align: 'center',
          className: 'row-combined'
        }, {
          title: '计划学时',
          key: 'planHours',
          width: 40,
          align: 'center',
          className: 'row-combined',
          render: (h, params) => {
            return h('span', params.row.planHours.content || '无')
          }
        }, {
          title: '实际学时',
          key: 'actualHours',
          width: 40,
          align: 'center',
          className: 'row-combined',
          render: (h, params) => {
            return h('span', params.row.actualHours.content || '无')
          }
        }, {
          title: '耗材需求',
          key: 'resources',
          minWidth: 90,
          align: 'center',
          className: 'row-combined',
          render: (h, params) => {
            return h('span', params.row.resources.content || '无')
          }
        }, {
          title: '软件需求',
          key: 'software',
          minWidth: 90,
          align: 'center',
          className: 'row-combined',
          render: (h, params) => {
            return h('span', params.row.software.content || '无')
          }
        }, {
          title: '系统需求',
          key: 'system',
          minWidth: 90,
          align: 'center',
          className: 'row-combined',
          render: (h, params) => {
            return h('span', params.row.system.content || '无')
          }
        }, {
          title: '教学对象',
          align: 'center',
          children: [
            {
              title: '学院',
              key: 'cInstitute',
              minWidth: 140,
              align: 'center',
              className: 'row-combined',
              slot: 'cInstitute'
            }, {
              title: '年级',
              key: 'cGrade',
              width: 50,
              align: 'center',
              className: 'row-combined',
              slot: 'cGrade'
            }, {
              title: '专业',
              key: 'cMajor',
              minWidth: 110,
              align: 'center',
              className: 'row-combined',
              slot: 'cMajor'
            }, {
              title: '班级',
              key: 'cSclass',
              width: 40,
              align: 'center',
              className: 'row-combined',
              slot: 'cSclass'
            }, {
              title: '人数',
              key: 'stuNum',
              width: 45,
              align: 'center',
              className: 'row-combined',
              render: (h, params) => {
                return h('span', params.row.stuNum.content || '无')
              }
            }
          ]
        }, {
          title: '操作',
          key: 'action',
          slot: 'action',
          width: 160,
          align: 'center',
          className: 'row-combined'
        }],
        data: [],
        highlightRow: false,
        selectedRows: []
      },
      modal: {
        save: {
          show: false,
          exp_type: 'COURSE',
          fieldsetTitle: '',
          title: '修改实验项目',
          app_code: null,
          sid: null,
          expIndex: null,
          editSingle: true
        }
      },
      exportLoading: false
    }
  },
  methods: {
    handleTableData (data) {
      let tempData = []
      let rowSpan = 0
      data.expBaseInfoItems.forEach((item, eIndex) => {
        if (data.exp_type === 'COURSE' && item.expTimeItemsCourse && item.expTimeItemsCourse.length > 0) {
          let tempMap = new Map()
          item.expTimeItemsCourse.forEach((c, cIndex) => {
            if (!tempMap.has(c.index)) {
              tempMap.set(c.index, {
                sweek: c.expItemTime.sweek,
                sdate: c.expItemTime.sdate,
                section: new Set().add(c.expItemTime.section),
                classroom: new Set().add(JSON.stringify(c.classroom))
              })
            } else {
              tempMap.get(c.index).section.add(c.expItemTime.section)
              tempMap.get(c.index).classroom.add(JSON.stringify(c.classroom))
            }
          })
          item.expTimeItemsCourse = Array.from(tempMap)
          item.expTimeItemsCourse.forEach((c, cIndex) => {
            let obj = {
              expType: {
                content: data.exp_type,
                rowSpan: 1,
                cellShow: false
              },
              appCode: data.app_code,
              teacherName: {
                content: data.teacher_name,
                rowSpan: 1,
                cellShow: false
              },
              courseName: {
                content: data.course_name,
                rowSpan: 1,
                cellShow: false
              },
              courseType: {
                content: data.course_type,
                rowSpan: 1,
                cellShow: false
              },
              textbook: {
                content: data.textbook,
                rowSpan: 1,
                cellShow: false
              },
              stuNum: {
                content: data.stu_num,
                rowSpan: 1,
                cellShow: false
              },
              cInstitute: {
                content: Array.from(new Set(data.classes.map(item => {
                  return item.institute
                }))),
                rowSpan: 1,
                cellShow: false
              },
              cGrade: {
                content: Array.from(new Set(data.classes.map(item => {
                  return item.grade
                }))),
                rowSpan: 1,
                cellShow: false
              },
              cMajor: {
                content: Array.from(new Set(data.classes.map(item => {
                  return item.major
                }))),
                rowSpan: 1,
                cellShow: false
              },
              cSclass: {
                content: data.classes.map(item => {
                  return item.sclass
                }),
                rowSpan: 1,
                cellShow: false
              }
            }
            obj.expIndex = {
              content: eIndex + 1,
              rowSpan: cIndex === 0 ? item.expTimeItemsCourse.length : 1,
              cellShow: cIndex === 0
            }
            obj.sid = item.sid
            obj.title = {
              content: item.title,
              rowSpan: cIndex === 0 ? item.expTimeItemsCourse.length : 1,
              cellShow: cIndex === 0
            }
            obj.type = {
              content: item.type,
              rowSpan: cIndex === 0 ? item.expTimeItemsCourse.length : 1,
              cellShow: cIndex === 0
            }
            obj.actualHours = {
              content: item.actual_hours,
              rowSpan: cIndex === 0 ? item.expTimeItemsCourse.length : 1,
              cellShow: cIndex === 0
            }
            obj.planHours = {
              content: item.plan_hours,
              rowSpan: cIndex === 0 ? item.expTimeItemsCourse.length : 1,
              cellShow: cIndex === 0
            }
            obj.resources = {
              content: item.resources,
              rowSpan: cIndex === 0 ? item.expTimeItemsCourse.length : 1,
              cellShow: cIndex === 0
            }
            obj.software = {
              content: item.software,
              rowSpan: cIndex === 0 ? item.expTimeItemsCourse.length : 1,
              cellShow: cIndex === 0
            }
            obj.system = {
              content: item.system,
              rowSpan: cIndex === 0 ? item.expTimeItemsCourse.length : 1,
              cellShow: cIndex === 0
            }
            obj = Object.assign({
              tIndex: cIndex,
              sweek: c[1].sweek,
              sdate: c[1].sdate,
              section: Array.from(c[1].section),
              classroom: Array.from(c[1].classroom).map(cr => { return JSON.parse(cr) })
            }, obj)
            obj.action = {
              rowSpan: cIndex === 0 ? item.expTimeItemsCourse.length : 1,
              cellShow: cIndex === 0
            }
            tempData.push(obj)
          })
          rowSpan = rowSpan + item.expTimeItemsCourse.length
        } else if (data.exp_type === 'TRAINING' && item.expTimeItemsTrain && item.expTimeItemsTrain.length > 0) {
          item.expTimeItemsTrain.forEach((c, cIndex) => {
            let obj = {
              expType: {
                content: data.exp_type,
                rowSpan: 1,
                cellShow: false
              },
              appCode: data.app_code,
              teacherName: {
                content: data.teacher_name,
                rowSpan: 1,
                cellShow: false
              },
              courseName: {
                content: data.course_name,
                rowSpan: 1,
                cellShow: false
              },
              courseType: {
                content: data.course_type,
                rowSpan: 1,
                cellShow: false
              },
              textbook: {
                content: data.textbook,
                rowSpan: 1,
                cellShow: false
              },
              stuNum: {
                content: data.stu_num,
                rowSpan: 1,
                cellShow: false
              },
              cInstitute: {
                content: Array.from(new Set(data.classes.map(item => {
                  return item.institute
                }))),
                rowSpan: 1,
                cellShow: false
              },
              cGrade: {
                content: Array.from(new Set(data.classes.map(item => {
                  return item.grade
                }))),
                rowSpan: 1,
                cellShow: false
              },
              cMajor: {
                content: Array.from(new Set(data.classes.map(item => {
                  return item.major
                }))),
                rowSpan: 1,
                cellShow: false
              },
              cSclass: {
                content: data.classes.map(item => {
                  return item.sclass
                }),
                rowSpan: 1,
                cellShow: false
              }
            }
            obj.expIndex = {
              content: eIndex + 1,
              rowSpan: cIndex === 0 ? item.expTimeItemsTrain.length : 1,
              cellShow: cIndex === 0
            }
            obj.sid = item.sid
            obj.title = {
              content: item.title,
              rowSpan: cIndex === 0 ? item.expTimeItemsTrain.length : 1,
              cellShow: cIndex === 0
            }
            obj.type = {
              content: item.type,
              rowSpan: cIndex === 0 ? item.expTimeItemsTrain.length : 1,
              cellShow: cIndex === 0
            }
            obj.actualHours = {
              content: item.actual_hours,
              rowSpan: cIndex === 0 ? item.expTimeItemsTrain.length : 1,
              cellShow: cIndex === 0
            }
            obj.planHours = {
              content: item.plan_hours,
              rowSpan: cIndex === 0 ? item.expTimeItemsTrain.length : 1,
              cellShow: cIndex === 0
            }
            obj.resources = {
              content: item.resources,
              rowSpan: cIndex === 0 ? item.expTimeItemsTrain.length : 1,
              cellShow: cIndex === 0
            }
            obj.software = {
              content: item.software,
              rowSpan: cIndex === 0 ? item.expTimeItemsTrain.length : 1,
              cellShow: cIndex === 0
            }
            obj.system = {
              content: item.system,
              rowSpan: cIndex === 0 ? item.expTimeItemsTrain.length : 1,
              cellShow: cIndex === 0
            }
            obj = Object.assign({
              trainingExpTime: [{
                dates: c.dates,
                haveClassOnWeekend: c.haveClassOnWeekend
              }],
              tIndex: cIndex,
              classroom: c.classroom
            }, obj)
            obj.action = {
              rowSpan: cIndex === 0 ? item.expTimeItemsTrain.length : 1,
              cellShow: cIndex === 0
            }
            tempData.push(obj)
          })
          rowSpan = rowSpan + item.expTimeItemsTrain.length
        }
      })
      tempData[0].expType.rowSpan = rowSpan
      tempData[0].expType.cellShow = true
      tempData[0].teacherName.rowSpan = rowSpan
      tempData[0].teacherName.cellShow = true
      tempData[0].courseName.rowSpan = rowSpan
      tempData[0].courseName.cellShow = true
      tempData[0].courseType.rowSpan = rowSpan
      tempData[0].courseType.cellShow = true
      tempData[0].textbook.rowSpan = rowSpan
      tempData[0].textbook.cellShow = true
      tempData[0].stuNum.rowSpan = rowSpan
      tempData[0].stuNum.cellShow = true
      tempData[0].cInstitute.rowSpan = rowSpan
      tempData[0].cInstitute.cellShow = true
      tempData[0].cGrade.rowSpan = rowSpan
      tempData[0].cGrade.cellShow = true
      tempData[0].cMajor.rowSpan = rowSpan
      tempData[0].cMajor.cellShow = true
      tempData[0].cSclass.rowSpan = rowSpan
      tempData[0].cSclass.cellShow = true
      return tempData
    },
    getTableColumns (columns) {
      let tableColumns = []
      columns.forEach(item => {
        if (!item.children) {
          tableColumns.push(item)
        }
        if (item.children && item.children.length > 0) {
          tableColumns = tableColumns.concat(this.getTableColumns(item.children))
        }
      })
      return tableColumns
    },
    // 在多选模式下有效，只要选中项发生变化时就会触发
    onSelectionChange (selection) {
      this.table.selection = selection
    },
    // 修改单个实验
    edit (row) {
      this.modal.save = Object.assign(this.modal.save, {
        show: true,
        exp_type: row.expType.content,
        title: '修改单个实验信息',
        fieldsetTitle: '实验' + row.expIndex.content + '基本信息',
        app_code: row.appCode,
        sid: row.sid,
        expIndex: row.expIndex.content,
        editSingle: true
      })
    },
    // 关闭 新增 / 修改 申请表的Modal的回调函数
    closeSaveModal () {
      this.$nextTick(() => {
        // 全局配置notice组件的属性
        this.$Notice.config({
          top: window.innerHeight / 3
        })
      })
    },
    // 修改实验填充表单失败
    failFillFrom (info) {
      this.modal.save.show = false
      this.$Notice.error({
        title: '获取实验信息失败，请稍后重试',
        desc: info
      })
    },
    // 成功 新增 / 修改 实验
    saveSuccess (isModified) {
      this.modal.save.show = false
      this.$nextTick(() => {
        this.$Notice.success({
          title: '提交成功',
          desc: isModified ? '修改实验信息成功' : '新增实验成功'
        })
        this.$emit('refresh')
      })
    },
    exportToExcel: function () {
      this.exportLoading = true
      const table = document.querySelector('#applied-form-detail .ivu-table')
      const fileName = this.title || '实验课信息登记表'
      const wb = this.$xlsx.utils.book_new()
      const ws = this.$xlsx.utils.table_to_sheet(table, {
        raw: true,
        display: true,
        ignoreEC: true
      })
      // const border = {
      //   border: {
      //     top: {
      //       style: 'medium'
      //     },
      //     bottom: {
      //       style: 'medium'
      //     },
      //     left: {
      //       style: 'medium'
      //     },
      //     right: {
      //       style: 'medium'
      //     }
      //   }
      // }
      const center = {
        alignment: {
          vertical: 'center',
          wrapText: true,
          horizontal: 'center'
        }
      }
      // 遍历所有单元格进行样式的处理
      Object.keys(ws).forEach(k => {
        if (k !== '!merges' && k !== '!ref') {
          // 去掉内容前后所有的空格
          ws[k].v = trim(ws[k].v)
          // 把内容中间的所有**进行换行
          ws[k].v = ws[k].v.replace(/\*\*/g, '\n')
          // 把内容中间的所有##替换成、
          ws[k].v = ws[k].v.replace(/##/g, '、')
          // 添加center和border样式
          if (ws[k].v) {
            ws[k].s = {...center,
              ...{
                font: {
                  name: 'Microsoft YaHei'
                }
              }
            }
          }
          if (ws[k].v === '暂无筛选结果') {
            delete ws[k]
          }
        }
      })
      this.$xlsx.utils.book_append_sheet(wb, ws, '实验课信息登记表')
      const wbout = this.$xls.write(wb, {bookType: 'xlsx', type: 'binary'})
      this.$fileSaver.saveAs(new Blob([s2ab(wbout)], {type: ''}), fileName + '.xlsx')
      this.exportLoading = false
      if (this.immediate) {
        this.$emit('exported', this.index)
      }
    }
  },
  created () {
    this.table.loading = true
    if (!this.showActionColumn) {
      this.table.columns.pop()
    }
    if (!this.showSelectionColumn) {
      this.table.columns.shift()
    }
    getAppliedFormDetail(this.code).then(response => {
      let res = response.data
      if (res.code === 1) {
        if (res.data.exp_type === 'TRAINING') {
          this.expType = 'TRAINING'
          let expTimeColumn = this.showSelectionColumn ? this.table.columns.slice(9, 10) : this.table.columns.slice(8, 9)
          expTimeColumn[0].children = [{
            title: '日期',
            slot: 'expTime',
            key: 'trainingExpTime',
            width: 150,
            className: 'row-combined',
            align: 'center'
          }]
        }
        this.table.data = this.handleTableData(res.data)
        let columns = this.getTableColumns(this.table.columns)
        this.$nextTick(() => {
          document.querySelectorAll((this.prefixClass ? this.prefixClass + ' ' : '') + '#applied-form-detail.detail-table .ivu-table-body td.row-combined').forEach((item, index) => {
            let row = this.table.data[Math.floor(index / (this.showSelectionColumn ? columns.length - 1 : columns.length))]
            let cell = columns[index % (this.showSelectionColumn ? columns.length - 1 : columns.length) + (this.showSelectionColumn ? 1 : 0)].key
            if (Object.prototype.toString.call(row[cell]) === '[object Object]') {
              item.setAttribute('rowspan', row[cell].rowSpan || 1)
              item.style.display = row[cell].cellShow ? '' : 'none'
              if (!row[cell].cellShow) {
                item.parentNode.removeChild(item)
              }
            }
          })
          this.table.loading = false
          if (this.immediate) {
            this.exportToExcel()
          }
        })
      } else {
        this.table.loading = false
        this.table.data = []
        this.$Notice.error({
          title: '列表加载失败',
          desc: '实验课信息登记表加载失败！' + res.info + '请重试！'
        })
      }
    }).catch(error => {
      this.table.loading = false
      this.table.data = []
      this.$Notice.error({
        title: '列表加载失败',
        desc: '实验课信息登记表加载失败！请重试！'
      })
      console.log(error)
    })
  },
  mounted () {
    this.$nextTick(() => {
      activeTableMove(document.querySelector((this.prefixClass ? this.prefixClass + ' ' : '') + '#applied-form-detail.detail-table .ivu-table-body'))
    })
  }
}
</script>

<style lang="less">
  .detail-table {
    .ivu-table {
      &-tbody {
        .ivu-table-cell {
          padding-top: 10px;
          padding-bottom: 10px;
          font-weight: bold;
        }
      }
      &-wrapper {
        border-color: #ccc;
      }
      &-border {
        & th {
          border-color: #ccc;
        }
        & td {
          border-color: #ccc;
        }
      }
    }
  }
</style>
